<template>
	<view style="width: 100%;height: 100vh;" v-if="bootId != '' && isshow == true">
		<view id="home" style="justify-content: space-between;padding: 20rpx 30rpx 0 30rpx;"
			class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
		</view>
		<view class="header">
			<view style="display: flex;">
				<image :src="campData.img" style="width: 200rpx;height: 200rpx;margin: 40rpx 20rpx 20rpx 20rpx;">
				</image>
				<view style="margin: 0rpx 0 0 0rpx;">
					<view style="font-size: 32rpx;font-weight: 600;margin-top: 50rpx;">
						{{campData.name}}
					</view>
					<view style="color: #6D6D6D;font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						期数：{{campData.qishu}}
					</view>
					<view style="color: #6D6D6D;font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						学习周期：{{campData.date}}
					</view>
					<view style="color: rgb(251, 0, 29);font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						￥{{campData.price}}
					</view>
				</view>
			</view>
			<view class="sticky-box" :style="stickyStyle">
				<utabsswiper activeColor="#ea5550" ref="tabs" :list="list" :current="current" @change="change"
					:fontSize="24" :is-scroll="false" swiperWidth="750"></utabsswiper>
			</view>
			<view v-show="swiperCurrent == 0">
				<introduction :introImg="campData.introduction" class="swiper-content">
				</introduction>
			</view>
			<view v-show="swiperCurrent == 1">
				<studyschedule ref="studyschedule" :bootId="bootId" :userId="userId" :token="token" :learn="learn"
					class="swiper-content">
				</studyschedule>
			</view>
			<view v-show="swiperCurrent == 2">
				<dynamic ref="dynamic" :bootId="bootId" :userId="userId" :token="token" class="swiper-content">
				</dynamic>
			</view>
			<view v-show="swiperCurrent == 3">
				<myDynamic ref="myDynamic" :bootId="bootId" :userId="userId" :token="token" class="swiper-content">
				</myDynamic>
			</view>
		</view>
		<button type="primary" class="call" @click="toWx()" v-show="swiperCurrent == 0">联系老师获取体验资格</button>
	</view>

</template>
<script>
	const app = getApp();
	import utabsswiper from '../portraitMaster/backup/h-tabs-swiper.vue';
	import introduction from './components/introduction.vue';
	import studyschedule from './components/studyschedule.vue';
	import dynamic from './components/dynamic.vue';
	import myDynamic from './components/myDynamic.vue';
	import {
		getCurrentBootcamp,
		getBootcampArrange,
		getBootcampList,
		getBootcampData
	} from '@/api/camp.js';
	import {
		addClickRecord,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		ref
	} from 'process';

	export default {
		components: {
			utabsswiper,
			introduction,
			studyschedule,
			dynamic,
			myDynamic,
		},
		data() {
			return {
				current: 0,
				swiperCurrent: 0,
				list: [{
					name: '简介'
				}, {
					name: '学习安排'
				}, {
					name: '动态'
				}, {
					name: '我的打卡记录'
				}],
				stickyStyle: '',
				detailHeight: 1000,
				campData: {},
				userId: '',
				token: '',
				phone: '',
				bootId: '', //训练营Id
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				marTop: 10,
				learn: 0,
				platform: uni.getSystemInfoSync().platform, //手机类型
				isshow: false,
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;
		},
		onPageScroll(res) { //、、、、、
			let that = this;
			//console.log('123----***  ' + res.scrollTop)
			// if (res.scrollTop > 300) { // 滚动超过300时吸顶
			// 	that.stickyStyle = 'position: fixed; top: 0; width: 100%; z-index: 999;';
			// } else {
			// 	that.stickyStyle = '';
			// }
		},
		onReachBottom() {
			let that = this;

			//console.log('onReachBottom');
			if (that.swiperCurrent == 1) {
				that.$nextTick(() => {
					that.$refs.studyschedule.bottomGet();
				})

			} else if (that.swiperCurrent == 2) {
				that.$refs.dynamic.bottomRequest();

			} else if (that.swiperCurrent == 3) {
				that.$refs.myDynamic.bottomRequest();
			}
		},
		onLoad(options) {
			let that = this;
			that.userId = options.userId;
			that.token = options.token;
			that.bootId = options.bootId;
			that.getCamp();
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			returns() {
				uni.navigateBack();
			},
			toWx() {
				let that = this;
				let platform = uni.getSystemInfoSync().platform; //手机类型
				// 通过检查window.android和window.webkit属性来判断是否是移动端
				if (window.webkit) {
					if (platform == 'ios') {
						window.webkit.messageHandlers.goWechatBoot.postMessage('aaa');
					}
				}
				if (platform == 'android') {
					window.location.href = 'goWechat';
				}
			},
			scroll: function(e) {},
			getCamp() {
				// let that = this;
				// let p = {};
				// p.userId = that.userId;
				// p.token = that.token;
				// getCurrentBootcamp(p).then(res => {
				// 	if (res.code == 0) {
				// 		that.campData = res.data;
				// 		that.learn = res.data.learn;
				// 		that.bootId = res.data.id.toString();
				// 		that.isshow = true;
				// 		if (that.learn == 0) {
				// 			that.current = 0;
				// 			that.swiperCurrent = 0;
				// 		} else {
				// 			that.current = 1;
				// 			that.swiperCurrent = 1;
				// 		}
				// 	}
				// })
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				p.bootId = that.bootId;
				getBootcampData(p).then(res => {
					if (res.code == 0) {
						that.campData = res.data;
						that.learn = res.data.learn;
						that.bootId = res.data.id.toString();
						that.isshow = true;
						if (that.learn == 0) {
							that.current = 0;
							that.swiperCurrent = 0;
						} else {
							that.current = 1;
							that.swiperCurrent = 1;
						}
					}
				})
			},
			calcSwiperHeight(index) {
				let that = this;
				// 使用$nextTick确保在DOM更新后再获取高度
				that.$nextTick(() => {
					// 创建节点查询
					const query = uni.createSelectorQuery().in(this);
					// 查找对应索引的内容容器。注意选择器，这里用class和属性选择器
					query.select('.swiper-content[data-index="' + index + '"]').boundingClientRect((
						rect) => {
						if (rect) {
							// 获取到节点的高度，并设置为swiper的高度
							that.detailHeight = rect.height;
							console.log(`第${index+1}个swiper-item的高度为:`, rect.height);
						}
					}).exec();
				});
			},
			change(current) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;
				//console.log(current)
				if (current == 1) {
					if (that.learn != 1) {
						// uni.showToast({
						// 	title: "请联系老师获取体验资格",
						// 	icon: 'none'
						// })
					}
				}
			},
			transition({
				detail: {
					dx
				}
			}) {
				let that = this;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;

				//重新计算高速
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.call {
		position: fixed;
		bottom: 60rpx;
		left: 40rpx;
		background-color: #ea5550;
		font-size: 30rpx;
		width: calc(100% - 80rpx);
		height: 80rpx;
		line-height: 80rpx;
	}

	.header {
		width: 100%;
		height: 200px;
	}

	.sticky-box {
		position: sticky;
		top: 0;
		/* 设定吸顶时的位置 */
		z-index: 999;
		/* 确保元素在顶层 */
		background-color: #fff;
		/* 建议设置背景，防止遮挡下方内容 */
	}
</style>